<template>
  <div>
    <!-- placeholder  -->
    <van-nav-bar title="黑马头条" fixed placeholder />
    <van-form @submit="onSubmit">
      <!-- van-field输入框   required 表示必填项* pattern 正则校验-->
      <van-field
        required
        v-model="form.mobile"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, pattern:/^1[3-9]\d{9}$/,message: '请填写11位手机号',trigger: 'onChange' }]"
      />
      <van-field
        required
        v-model="form.code"
        name="验证码"
        type="password"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true,pattern:/^\d{6}$/, message: '请输入6位验证码' }]"
      />
      <div style="margin: 16px;">
        <!-- native-type按钮类型
        disabled 按钮禁用状态
        loading -->
        <van-button round block type="info" native-type="submit"
        :disabled="isLoading"
        :loading="isLoading"
        loading-text="拼命加载中。。。"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 1. 登录页面准备
// 新建登录页面文件(src/views/Login/index.vue)
// 在路由文件中配置路由路径，及路由懒加载和重定向设置
// 将路由挂载到App.vue中(router-view)
// 2. 登录页面铺设(使用vant)
// 顶部导航栏，引入并使用vant的NavBar组件
// 复制组件代码，根据原页面修改结构
// 定制样式主题(按需引入方法修改babel.config.js,在vue.config.js配置覆盖less文件变量的绝对地址,srcy以外的文件修改后需重启服务器
// 3. 铺设登录表单
// 查看vant-form表单文档，并复制相关结构
// 添加需要的属性，required为输入表单的必填项属性
// 4. 表单校验
// v-model绑定form表单的对象属性和输入框的值
// 在输入框的rules设置校验规则，pattern为正则校验规则
// 5.登录校验
// vant组件form表单提交时，会自己校验每一项，验证不通过，表单不提交
// 6. 与后台交互，进行登录
// 封装登录接口方法api/index.js
// 在登录页面中引入登录方法，在submit函数中调用方法，收集表单数据作为参数，返回登录结果
// 调用token封装的保存token的方法，保存token
// 7. 提示框的设置
// 8. 登录状态提示，防止频繁点击按钮
// 给按钮添加disabled属性，设置禁用状态，并添加加载状态和加载提示文字
// 点击按钮按钮禁用，登录成功或失败，按钮解禁
// 登陆成功跳转到layout页面
import { loginApi } from '@/api'
import { setToken } from '@/utils/token'
import { setStorage } from '@/utils/storage'
// 函数调用的方法使用
// import { Notify } from 'vant'

export default {
  data () {
    return {
      form: {
        mobile: '15801054990',
        code: '246810'
      },
      isLoading: false
    }
  },
  methods: {
    async onSubmit () {
      // 登录提交后按钮禁用
      this.isLoading = true
      try {
        const re = await loginApi({ ...this.form })
        // console.log(re)
        // 保存token
        setToken(re.data.data.token)
        setStorage('refresh_token', re.data.data.refresh_token)
        this.$toast('恭喜您！登陆成功')
        // Notify({ type: 'success', message: '登录成功' })
        this.isLoading = false
        // 点击登录后跳转时判断路由地址有没有参数,如果有跳转相应页面，如果没有跳转layout
        // console.log(this.$route)
        this.$router.replace({
          path: this.$route.query.pa || '/layout'
        })
      } catch (err) {
        console.error(err)
        this.$toast('登陆失败')
        // Notify({ type: 'danger', message: '登陆失败' })
        this.isLoading = false
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
